<nz-layout class='main' [ngClass]="{'max':electron.isWindowMax}">
    <div appWinOperation class='app-title' *ngIf='electron.isElectron && !electron.isWindowMax'>
        <div class='logo'></div>
        <div class='win-ctrl-group'>
            <a class="win-ctrl  size sys-ctrl" (click)="windowOper('window-min')"><span class="iconfont icon-win-min"></span></a>
            <a class="win-ctrl  size sys-ctrl" (click)="windowOper('window-max')"><span class="iconfont icon-win-max1"></span></a>
            <a class="win-ctrl close sys-ctrl" (click)="windowOper('window-close')"><span class="iconfont icon-win-close"></span></a>
        </div>
    </div>
    <nz-content>
        <myTabView appWinOperation [showAdd]="true" [(activeIndex)]='selectedIndex' [extraContent]="extraTemplate" (onAddTab)='showTreeView(true)' [controlClose]='true' (onClose)='closeTab($event)' (activeIndexChange)='onSelectTabChange($event)' (onDragDrop)='onTabDragDrop($event)'>
            <myTabPanel [isHome]="true" [header]="'NgTerm'">
                <app-home></app-home>
                <!--button nz-button nztype="primary" (click)="newLocalShell()"><i nz-icon nzType="windows" nztheme="outline"></i></button>
                <app-history></app-history-->
            </myTabPanel>
            <myTabPanel *ngFor='let tab of tablist; let i=index' [closable]="true" [header]="titleTemplate" (onContextMenu)="contextMenu($event, tabMenu)">
                <ng-template #titleTemplate>
                    <span class='tabTitle'>
                        <div *ngIf="tab.showChange" class='badge normal'></div>
                        <div *ngIf="tab.showError" class='badge error'></div>
                        <i *ngIf="tab.isLoading"  class='titleIcon' nz-icon nzType="loading" nzTheme="outline"></i>
                        <i *ngIf="!tab.isLoading" class='titleIcon' nz-icon [nzType]="tab.icon" #popOrigin></i>
                        <span #popRename nz-popconfirm [nzPopconfirmTitle]="titleEditTemplate" nzPopconfirmPlacement="bottom" (nzOnConfirm)="confirmRename(i)"></span>
                    <ng-template #titleEditTemplate><input type="text" nz-input [(ngModel)]="newTitle" spellcheck="false" /></ng-template>
                    </span>
                    {{ tab.title }}
                </ng-template>
                <nz-dropdown-menu #tabMenu="nzDropdownMenu">
                    <ul nz-menu>
                        <li *ngIf="tab.type=='ssh' || tab.type=='sftp'" nz-menu-item (click)="dupTab(tab, i, 'ssh')"><i nz-icon nzType="copy" nzTheme="outline"></i>Duplicate(SSH)</li>
                        <li *ngIf="tab.type=='ssh' || tab.type=='sftp'" nz-menu-item (click)="dupTab(tab, i, 'sftp')"><i nz-icon nzType="copy" nzTheme="outline"></i>Duplicate(SFTP)</li>
                        <li *ngIf="tab.type=='local'" nz-menu-item (click)="dupTab(tab, i, 'local')"><i nz-icon nzType="copy" nzTheme="outline"></i>Duplicate</li>
                        <li *ngIf="tab.type=='ssh' || tab.type=='local'" nz-menu-item (click)="splitTab(i)"><i nz-icon nzType="border-horizontal" nzTheme="outline"></i>Split</li>
                        <li *ngIf="tab.type=='ssh' || tab.type=='local'" nz-menu-item (click)="toggleDirection(i)"><i nz-icon nzType="redo" nzTheme="outline"></i>Toggle Direction</li>
                        <li *ngIf="tab.type=='ssh'" nz-menu-item (click)="reconnect(i)"><i nz-icon nzType="disconnect" nzTheme="outline"></i>Reconnect</li>
                        <li nz-menu-item (click)="renameTitle(i)"><i nz-icon nzType="edit" nzTheme="outline"></i>Rename</li>
                        <li nz-menu-item (click)="closeTab({index: i+1})"><i nz-icon nzType="close" nzTheme="outline"></i>Close</li>
                        <li *ngIf="tablist.length > 1" nz-menu-item (click)="closeTab(null, 'all')"><i nz-icon nzType="close" nzTheme="outline"></i>Close All</li>
                        <li *ngIf="tablist.length > 1" nz-menu-item (click)="closeTab({index: i+1}, 'others')"><i nz-icon nzType="close" nzTheme="outline"></i>Close Others</li>
                    </ul>
                </nz-dropdown-menu>
                <app-term *ngIf="tab.type=='ssh' || tab.type=='local'" [type]='tab.type' [tabIndex]='i' [host]='hostCfg.getConnectHost(tab.host)' (onStateChange)='onTabStateChange(i, $event)'></app-term>
                <app-sftp *ngIf="tab.type=='sftp'" [type]='tab.type' [tabIndex]='i' [host]='hostCfg.getConnectHost(tab.host)' (onStateChange)='onTabStateChange(i, $event)'></app-sftp>
                <app-forward *ngIf="tab.type=='forward'" [type]='tab.type' [tabIndex]='i' [host]='hostCfg.getConnectHost(tab.host)' (onStateChange)='onTabStateChange(i, $event)'></app-forward>
            </myTabPanel>
        </myTabView>
        <ng-template #extraTemplate>
            <button class="sys-ctrl" nz-button nzType="text" nz-dropdown [nzDropdownMenu]="menuSystem"><i nz-icon nzType="menu" nzTheme="outline"></i></button>
            <nz-dropdown-menu #menuSystem="nzDropdownMenu">
                <ul nz-menu>
                    <li nz-menu-item (click)="toggleDarkMode()"><i nz-icon nzType="setting" nzTheme="outline"></i>Toggle Theme</li>
                    <li *ngIf="electron.isElectron" nz-menu-item (click)="windowOper('window-open-devtool')"><i nz-icon nzType="tool" nzTheme="outline"></i>DevTool</li>
                    <li nz-menu-item (click)="showAbout()"><i nz-icon nzType="question-circle" nzTheme="outline"></i>About</li>
                </ul>
            </nz-dropdown-menu>
            <ng-container *ngIf='electron.isWindowMax'>
                <a class="win-ctrl  size sys-ctrl" (click)="windowOper('window-min')"><span class="iconfont icon-win-min"></span></a>
                <a class="win-ctrl  size sys-ctrl" (click)="windowOper('window-max')"><span class="iconfont icon-win-max2"></span></a>
                <a class="win-ctrl close sys-ctrl" (click)="windowOper('window-close')"><span class="iconfont icon-win-close"></span></a>
            </ng-container>
        </ng-template>
    </nz-content>
</nz-layout>
<nz-drawer [nzClosable]="true" [nzWidth]="350" [nzVisible]="isTreeViewOpened" nzPlacement="right" nzTitle="Select Host" [nzFooter]="footerTpl" (nzOnClose)="showTreeView(false)">
    <app-host-tree #hostTree (onDblClick)="onHostTreeDblClick($event)"></app-host-tree>
    <ng-template #footerTpl>
        <div class="selectHostBtn" style="float: right">
            <button nz-button nzType="primary" (click)="confirmTreeNode('local')">LocalTerm</button>
            <button nz-button nzType="primary" [disabled]="!hostTree.isHostSelected()" (click)="confirmTreeNode('ssh', hostTree.selectedHost)">SSH</button>
            <button nz-button nzType="primary" [disabled]="!hostTree.isHostSelected()" (click)="confirmTreeNode('sftp', hostTree.selectedHost)">SFTP</button>
            <button nz-button nzType="primary" [disabled]="!hostTree.isForwardSelected()" (click)="confirmTreeNode('forward', hostTree.selectedHost)">Forward</button>
        </div>
    </ng-template>
</nz-drawer>